<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box {
				width: 600px;
				height: 600px;
				border: 1px red solid;
				margin: 0 auto;
			}

			.box2 {
				width: 400px;
				height: 400px;
				/* background-color: azure; */
				border: 1px red solid;
				margin: 20px auto;
			}

			.box1 {
				margin-left: 20px;
			}

			.box1 input {
				margin: 10px 2px;
				width: 60px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">
				<input type="button" value="红色" index="red">
				<input type="button" value="绿色" index="green">
				<input type="button" value="蓝色" index="blue">

			</div>
			<div class="box2">

			</div>
		</div>
		<script>
			var input = document.querySelectorAll('input')
			var bg = document.querySelector('.box2')
			var bx1 =document.querySelector('.box1')
			// console.log(bx1)
			// console.log(bg)
			for (let i = 0; i < input.length; i++) {
				input[i].onclick = () => {
				var ipt =  input[i].getAttribute('index')
				bg.style.background=ipt
				}
			}
			console.log(bg.parentNode)//父节点
			console.log(bx1.firstElementChild);//获取第一个子元素
			console.log(bx1.lastElementChild);//获取最后一个子元素
			console.log(bx1.children);//获取元素下的所有子元素
			console.log(input[1].previousElementSibling);//获取上一个兄弟元素节点
			console.log(input[1].nextElementSibling);//获取下一个兄弟元素节点
			
			
			var h2 =document.createElement('h2')//创建一个节点，一个节点只能出现一次
			h2.innerText="在此插入h2标签"
			console.log(h2);
			bx1.appendChild(h2)
			
		</script>
	</body>
</html>